<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-content">
                <div class="container-content-table">
                    <a-table
                        :columns="columns"
                        :data="tableList"
                        :loading="loading"
                        v-model:selectedKeys="selectedKeys"
                        row-key="id"
                        :pagination="false"
                    >
                        <template #operate="{ record }">
                            <div class="flex">
                                <a-link @click="showDetail(record)">
                                    {{ $t('basics.Edit') }}</a-link
                                >
                            </div>
                        </template>
                    </a-table>
                </div>
            </div>
            <a-modal
                :render-to-body="false"
                v-model:visible="visibleAdmin"
                :content-flex="false"
                :footer="false"
                :width="500"
            >
                <template
                    #title
                    v-if="rows.config_key === 'customer_service_switch'"
                >
                    {{ $t('basics.CustomerServiceSystemSwitch') }}
                </template>
                <template #title v-if="rows.config_key === 'resend'">
                    {{ $t('basics.ReplayTheTemplate') }}
                </template>
                <template #title v-if="rows.config_key === 'tcard'">
                    tcard配置
                </template>
                <template #title v-if="rows.config_key === 'reset'">
                    表情开关
                </template>
                <template #title v-if="rows.config_key === 'is_rand_emoji'">
                    随机表情配置
                </template>
                <template #title v-if="rows.config_key === 'announcement'">
                    公告内容
                </template>
                <template #title v-if="rows.config_key === 'tcard_can_send'">
                    tcard短信发送检查
                </template>
                <template
                    #title
                    v-if="rows.config_key === 'task_detail_interval_time'"
                >
                    全局信息发送间隔
                </template>

              <template
                  #title
                  v-if="rows.config_key === 'task_detail_interval_one_time'"
              >
                单帐号信息发送间隔
              </template>



                <template
                    #title
                    v-if="
                        rows.config_key === 'tcard_expiration_time' ||
                        rows.config_key === 'tcard_sms_type'
                    "
                >
                    配置
                </template>

                <div>
                    <template
                        v-if="rows.config_key === 'customer_service_switch'"
                    >
                        <div style="padding: 0 10px 10px">
                            <a-form-item
                                field="customer_service_type"
                                class="m-[0px]"
                                :label="$t('basics.customType')"
                            >
                                <a-radio-group
                                    v-model="from.customer_service_type"
                                    class="item-type"
                                    :options="types"
                                />
                            </a-form-item>
                            <a-form-item
                                field="customer_service_switch"
                                class="m-[0px]"
                                :label="$t('basics.customSwitch')"
                            >
                                <a-radio-group
                                    v-model="from.customer_service_switch"
                                    :options="plainOptions"
                                />
                            </a-form-item>
                            <a-form-item
                                field="is_force_customer_service"
                                class="m-[0px]"
                                :label="$t('basics.mandatoryCustomSwitch')"
                            >
                                <a-radio-group
                                    v-model="from.is_force_customer_service"
                                    :options="plainOptions"
                                />
                            </a-form-item>
                        </div>
                    </template>

                    <template v-if="rows.config_key === 'resend'">
                        <a-col :span="20" class="flex items-center pb-[20px]">
                            <a-form-item
                                field="status"
                                class="m-[0px]"
                                :label="$t('basics.IsItEnabled')"
                            >
                                <a-radio-group
                                    v-model="from.switch"
                                    :options="plainOptions"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="20" class="flex items-center pb-[20px]">
                            <a-form-item
                                field="status"
                                class="m-[0px]"
                                :label="$t('basics.RewriteMinutes')"
                            >
                                <a-input
                                    :style="{ width: '320px' }"
                                    v-model="from.resend_minutes"
                                />
                            </a-form-item>
                        </a-col>
                        <a-col :span="20" class="flex items-center pb-[20px]">
                            <a-form-item
                                field="status"
                                class="m-[0px]"
                                :label="$t('basics.HeavyDutyType')"
                            >
                                <a-select
                                    :style="{ width: '320px' }"
                                    v-model="from.resend_type"
                                >
                                    <a-option
                                        v-for="item of data"
                                        :value="item.value"
                                        :label="item.label"
                                    />
                                </a-select>
                            </a-form-item>
                        </a-col>
                    </template>

                    <template v-if="rows.config_key === 'tcard'">
                        <!-- <a-form-item
                            field="max_conversation"
                            class="tcard-label"
                            label="一天最多创建对话数"
                        >
                            <a-input
                                style="width: 100%; margin-right: 20px"
                                v-model="from.max_conversation"
                                placeholder="一天最多创建对话数"
                                type="number"
                            />
                        </a-form-item> -->
                        <a-form-item
                            field="send_interval_seconds"
                            class="tcard-label"
                            label="发送信息间隔秒数"
                        >
                            <a-input
                                style="width: 100%; margin-right: 20px"
                                v-model="from.send_interval_seconds"
                                placeholder="发送信息间隔秒数"
                                type="number"
                            />
                        </a-form-item>
                    </template>

                    <template v-if="rows.config_key === 'reset'">
                        <a-form-item
                            field="reset"
                            class="tcard-label"
                            label="表情开关"
                        >
                            <a-radio-group
                                v-model="from.reset"
                                :options="resetOptions"
                            />
                        </a-form-item>
                    </template>
                    <template v-if="rows.config_key === 'is_rand_emoji'">
                        <a-form-item
                            field="switch"
                            class="tcard-label"
                            label="随机表情开关"
                        >
                            <a-switch
                                v-model="from.switch"
                                :checked-value="1"
                                :unchecked-value="0"
                            />
                        </a-form-item>
                    </template>
                    <template v-if="rows.config_key === 'announcement'">
                        <a-form-item
                            field="switch"
                            class="tcard-label"
                            label="公告开关"
                        >
                            <a-switch
                                v-model="from.switch"
                                :checked-value="1"
                                :unchecked-value="0"
                            />
                        </a-form-item>
                        <a-form-item
                            field="text"
                            class="tcard-label"
                            label="公告内容"
                        >
                            <a-textarea
                                style="width: 100%; margin-right: 20px"
                                v-model="from.text"
                                placeholder="公告内容"
                            />
                        </a-form-item>
                        <a-form-item
                            field="en_text"
                            class="tcard-label"
                            label="公告内容(en)"
                        >
                            <a-textarea
                                style="width: 100%; margin-right: 20px"
                                v-model="from.en_text"
                                placeholder="公告内容(en)"
                            />
                        </a-form-item>
                    </template>
                    <template
                        v-if="rows.config_key === 'tcard_expiration_time'"
                    >
                        <a-form-item
                            field="minute"
                            class="tcard-label"
                            label="号码有效时间(分钟)"
                        >
                            <a-input
                                style="width: 100%; margin-right: 20px"
                                v-model="from.minute"
                                placeholder="号码有效时间(分钟)"
                            />
                        </a-form-item>
                    </template>
                    <template v-if="rows.config_key === 'tcard_sms_type'">
                        <a-form-item
                            field="tcard_sms_type"
                            class="tcard-label"
                            label="短信类型"
                        >
                            <a-radio-group
                                v-model="from.tcard_sms_type"
                                :options="messageOptions"
                            />
                        </a-form-item>
                    </template>
                    <template v-if="rows.config_key === 'tcard_can_send'">
                        <a-form-item
                            field="message_content"
                            class="tcard-label"
                            label="接收的手机号"
                        >
                            <a-input
                                style="width: 100%; margin-right: 20px"
                                v-model="from.message_content"
                                placeholder="接收的手机号"
                            />
                        </a-form-item>
                    </template>
                    <template
                        v-if="rows.config_key === 'task_detail_interval_time'"
                    >
                        <a-form-item
                            field="seconds"
                            class="tcard-label"
                            label="发送间隔"
                        >
                            <a-input
                                style="width: 100%; margin-right: 20px"
                                v-model="from.seconds"
                                placeholder="发送间隔(秒)"
                            />
                        </a-form-item>
                    </template>

                  <template
                      v-if="rows.config_key === 'task_detail_interval_one_time'"
                  >
                    <a-form-item
                        field="seconds"
                        class="tcard-label"
                        label="发送间隔"
                    >
                      <a-input
                          style="width: 100%; margin-right: 20px"
                          v-model="from.seconds"
                          placeholder="发送间隔(毫秒)"
                      />
                    </a-form-item>
                  </template>

                    <div class="dialog-foot">
                        <a-button
                            style="color: #000"
                            class="mr20"
                            @click="visibleAdmin = !visibleAdmin"
                            >{{ $t('basics.concel') }}</a-button
                        >
                        <a-button
                            class="mr20"
                            type="primary"
                            @click="handleOkAdmin"
                            >{{ $t('basics.sure') }}</a-button
                        >
                    </div>
                </div>
            </a-modal>
            <ma-import
                :render-to-body="false"
                ref="crudImportRef"
                :upLoadData="importFile"
                @success="refresh"
                :isShowLoad="true"
                :isShowType="true"
                :downLoadData="downFile"
            />
        </div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
import { getCnfig, ServiceSwitch, updateResend } from '@/api/cloud/client.js';
import { getProjectId } from '@/api/cloud/userProject.js';
import MaImport from '@/components/import/index.vue';
import appData from '@/assets/images/emojis.json';
import { useI18n } from 'vue-i18n';
import { $request } from '@/utils/request.js';
const { t } = useI18n();
const { proxy } = getCurrentInstance();
const plainOptions = [
    { label: t('basics.yes'), value: 1 },
    { label: t('basics.no'), value: 0 }
];

const messageOptions = [
    { label: '彩信', value: 'mms' },
    { label: '短信', value: 'sms' }
];

const types = [
    { label: 'TN', value: 'tn' },
    { label: 'TF', value: 'tf' }
];

const resetOptions = [
    {
        label: '启用',
        value: true
    },
    {
        label: '禁用',
        value: false
    }
];

const from = ref({});
const rows = ref({});
const showDetail = (item) => {
    rows.value = item;
    from.value = item.config_value;

    visibleAdmin.value = true;
};
const data = ref([
    {
        value: 'last',
        label: t('basics.PreviousArticle')
    },
    {
        value: 'template',
        label: t('basics.Template')
    }
]);

const visibleAdmin = ref(false);
const selectedKeys = ref([]);
const faceList = ref([]);
const loading = ref(false);

const columns = [
    {
        title: t('basics.ConfigurationName'),
        dataIndex: 'config_key',
        minWidth: 300,
        slotName: 'config_key',
        ellipsis: true,
        tooltip: true
    },
    {
        title: t('basics.ConfigurationDescription'),
        dataIndex: 'config_desc',
        minWidth: 200
    },
    {
        title: t('basics.status'),
        dataIndex: 'operate',
        slotName: 'operate',
        width: 100
    }
];
const form = ref({
    page: 1,
    pageSize: 100,
    reply_type: 0
});
const tableList = ref([]);

// 获取美国项目id
const getId = async () => {
    loading.value = true;
    await getProjectId({ project_key: 'america' }).then((res) => {
        form.value.project_id = res.data.id;
    });
    await getList();
    loading.value = false;
};

// 获取列表数据
const getList = () => {
    getCnfig({}).then((res) => {
        tableList.value = res.data;
    });
};

const loadEmojis = () => {
    faceList.value = appData;
};

// 上传项目操作
const crudImportRef = ref('');
const importFile = ref({
    url: 'client/quickReply/import',
    params: {}
});
const downFile = ref({
    url: 'client/quickReply/download'
});
//   导入成功后
const refresh = () => {
    getList();
};

const handleOkAdmin = () => {
    if (rows.value.config_key === 'customer_service_switch') {
        ServiceSwitch(from.value)
            .then((res) => {
                if (res.code == 200) {
                    visibleAdmin.value = false;
                    proxy.$message.success(t('basics.controlsSecc'));
                    getList();
                } else {
                    visibleAdmin.value = false;
                    proxy.$message.error(res.message);
                }
            })
            .catch((error) => {});
    }
    if (rows.value.config_key === 'resend') {
        if (from.value.resend_minutes) {
            updateResend(from.value)
                .then((res) => {
                    if (res.code == 200) {
                        visibleAdmin.value = false;
                        proxy.$message.success(t('basics.controlsSecc'));
                        getList();
                    } else {
                        visibleAdmin.value = false;
                        proxy.$message.error(res.message);
                    }
                })
                .catch((error) => {});
        } else {
            proxy.$message.success(t('basics.resendMinutesCannotBeEmpty'));
        }
    }
    if (rows.value.config_key === 'tcard') {
        $request
            .post('/cloud/config/updateTcard', { ...from.value })
            .then((res) => {
                visibleAdmin.value = false;
                proxy.$message.success(t('basics.controlsSecc'));
            });
    }
    if (rows.value.config_key === 'task_detail_interval_time') {
        from.value.seconds = Number(from.value.seconds);
    }
    let params = {
        config_key: rows.value.config_key,
        config_value: {
            ...from.value
        },
        config_desc: rows.value.config_desc
    };
    $request.post('/cloud/config/updateCommon', params).then((res) => {
        visibleAdmin.value = false;
        proxy.$message.success(t('basics.controlsSecc'));
    });
};

getId();
loadEmojis();
</script>
<script>
export default { name: 'cloud:userProject' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
:deep(.arco-form-item-label) {
    text-align: right;
    width: 140px;
    font-weight: 600;
}
::v-deep .item-type .arco-radio {
    margin-right: 15px;
}
</style>
